<script setup>

import { ref } from 'vue';
import axios from 'axios';

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
// 注册使用的模块
const modules = [Autoplay, Pagination, Navigation];
const images = [

    '/src/assets/img/home/lunbo/lunbo1_1500x600.jpg',
    '/src/assets/img/home/lunbo/lunbo2_1500x600.jpg',
    '/src/assets/img/home/lunbo/lunbo3_1500x600.jpg',

];

</script>

<template>
    <div class="empty--contains-block">
        <div class="container block lazy come-in--bot entered come-in--animate" data-lazy-function="slideIn"
            data-ll-status="entered">
            <div class="block__content">
                <div class="numbers">
                    <div class="numbers__items padding--m" style="--noOfItems: 3">
                        <div class="numbers__item">
                            <img src="/src/assets/img/home/icon/employees.svg" alt="Employees">

                            <div class="numbers__text">
                                <!-- <span>超过</span> -->
                                <!-- <span class="numbers__number">250+</span> -->
                                <!-- <span>Employees</span> -->
                                <span class="text"><span class="weight">We</span> have an experienced team.</span>
                            </div>
                        </div>
                        <div class="numbers__item">
                            <img src="/src/assets/img/home/icon/bracket.svg" alt="Bracket">

                            <div class="numbers__text">
                                <!-- <span>每年我们生产超过</span> -->
                                <!-- <span class="numbers__number">6M</span> -->
                                <!-- <span>Finished Products</span> -->
                                <span class="text">Focus on manufacturing of <span class="weight">multiple varieties in
                                        small batches.</span></span>
                            </div>
                        </div>
                        <div class="numbers__item">
                            <img src="/src/assets/img/home/icon/icon_03.png" alt="Reverse Engineering Icon"
                                data-extentions-extra-ocr-id="fb2e986c73431506628b299da26ed78f">

                            <div class="numbers__text">
                                <!-- <span>制造空间：</span> -->
                                <!-- <span class="numbers__number" style="white-space: nowrap;">4000㎡</span> -->
                                <span class="text"><span class="weight">4000㎡</span> manufacturing space</span>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 轮播图开始 -->
    <div class="container ">
        <Swiper :loop="true">

            <!-- <SwiperSlide v-for="(item, index) in images" :key="index">

                <img :src="item" class="slide-image" alt="轮播图" />

            </SwiperSlide> -->


            <SwiperSlide>

                <img src="/src/assets/img/home/lunbo/lunbo1_1500x600.jpg" class="slide-image" alt="轮播图" />

            </SwiperSlide>
            <SwiperSlide>

                <img src="/src/assets/img/home/lunbo/lunbo2_1500x600.jpg" class="slide-image" alt="轮播图" />

            </SwiperSlide>
            <SwiperSlide>

                <img src="/src/assets/img/home/lunbo/lunbo3_1500x600.jpg" class="slide-image" alt="轮播图" />

            </SwiperSlide>
        </Swiper>
    </div>

    <!-- 轮播图结束 -->

    <div class="container horizontal-icons padding--l">
        <div class="horizontal-icons__pretext">
            <!-- <h2>我们在内部进行生产，提供全套一站式服务</h2> -->
            <h2>We conduct production internally and offer a full range of one-stop services.</h2>
            <!-- <p class="col-6 position--center">德大海康是一家领先的金属和塑料合约制造商，以垂直整合一体化的方式生产由钣金、管材以及塑料注塑部件制成的成品。</p> -->
            <p class="col-6 position--center">Dedahaikang is a leading manufacturer of livestock machinery, producing
                finished products made of sheet metal, pipes and plastic injection molded parts in a vertically integrated
                and integrated manner.</p>
            <!-- <p>这意味着：</p> -->
            <p>This means：</p>
        </div>
        <div class="horizontal-icons__wrapper col-10 position--center">
            <div class="horizontal-icons__item lazy come-in--top entered come-in--animate" data-lazy-function="slideIn"
                data-ll-status="entered">
                <img class="horizontal-icons__icon lazy entered loaded"
                    data-src="/src/assets/img/home/icon/supply_chain.svg" alt="Supply Chain"
                    data-extentions-extra-ocr-id="e3b0c44298fc1c149afbf4c8996fb924" data-ll-status="loaded"
                    src="/src/assets/img/home/icon/supply_chain.svg">
                <!-- <span class="horizontal-icons__text">更严格的供应链控制</span> -->
                <span class="horizontal-icons__text">Stricter supply chain control</span>
            </div>
            <div class="horizontal-icons__item lazy come-in--top entered come-in--animate" data-lazy-function="slideIn"
                data-ll-status="entered">
                <img class="horizontal-icons__icon lazy entered loaded"
                    data-src="/src/assets/img/home/icon/transparency.svg" alt="Contract Manufacturing"
                    data-extentions-extra-ocr-id="e3b0c44298fc1c149afbf4c8996fb924" data-ll-status="loaded"
                    src="/src/assets/img/home/icon/transparency.svg">
                <!-- <span class="horizontal-icons__text">更高的透明度</span> -->
                <span class="horizontal-icons__text">Higher transparency</span>
            </div>
            <div class="horizontal-icons__item lazy come-in--top entered come-in--animate" data-lazy-function="slideIn"
                data-ll-status="entered">
                <img class="horizontal-icons__icon lazy entered loaded"
                    data-src="/src/assets/img/home/icon/cost_control.svg" alt="Cost Control"
                    data-extentions-extra-ocr-id="e3b0c44298fc1c149afbf4c8996fb924" data-ll-status="loaded"
                    src="/src/assets/img/home/icon/cost_control.svg">
                <!-- <span class="horizontal-icons__text">更好的成本控制</span> -->
                <span class="horizontal-icons__text">Better cost control</span>

            </div>
            <div class="horizontal-icons__item lazy come-in--top entered come-in--animate" data-lazy-function="slideIn"
                data-ll-status="entered">
                <img class="horizontal-icons__icon lazy entered loaded" style="height:78px; width:auto"
                    data-src="/src/assets/img/home/icon/icon_07.png" src="/src/assets/img/home/icon/icon_07.png">
                <!-- <span class="horizontal-icons__text">更短的交货时间</span> -->
                <span class="horizontal-icons__text">Shorter delivery time</span>
            </div>
        </div>
    </div>

    <div class="container daigong">
        <div class="title">
            □ Original Equipment Manufacturer
        </div>
        <div class="item-list">

            <div class="item">
                <div class="zhutu">
                    <img src="/src/assets/img/home/daigong/jiguangqiege.jpg" alt="">

                </div>
                <div class="biaoqian-label">
                    <div class="biaoqian">
                        <img src="/src/assets/img/home/icon/icon_08.png" />
                    </div>
                    <div class="label">
                        <h3>Laser Cutting Service</h3>
                        <p>Precise cutting with high-energy laser is suitable for various materials, and the cut surface is
                            smooth.</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="zhutu">
                    <img src="/src/assets/img/home/daigong/chongya.jpg" alt="">

                </div>
                <div class="biaoqian-label">
                    <div class="biaoqian">
                        <img src="/src/assets/img/home/icon/icon_09.png" />
                    </div>
                    <div class="label">
                        <h3>Stamping Service</h3>
                        <p>Efficient molding suitable for medium-volume orders.
                        </p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="zhutu">
                    <img src="/src/assets/img/home/daigong/jixiezhuangpei.jpg" alt="">

                </div>
                <div class="biaoqian-label">
                    <div class="biaoqian">
                        <img src="/src/assets/img/home/icon/icon_10.png" />
                    </div>
                    <div class="label">
                        <h3>Mechanical Assembly Service</h3>
                        <p>
                            Provide product assembly and partial assembly services.
                        </p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="zhutu">
                    <img src="/src/assets/img/home/daigong/gandaozhizao.jpg" alt="">

                </div>
                <div class="biaoqian-label">
                    <div class="biaoqian">
                        <img src="/src/assets/img/home/icon/icon_11.png" />
                    </div>
                    <div class="label">
                        <h3>Pipe and Tube Fabrication Service</h3>
                        <p>
                            We offer a variety of processes for pipes.
                        </p>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="zhutu">
                    <img src="/src/assets/img/home/daigong/zusu.jpg" alt="">

                </div>
                <div class="biaoqian-label">
                    <div class="biaoqian">
                        <img src="/src/assets/img/home/icon/icon_12.png" />
                    </div>
                    <div class="label">
                        <h3>Plastic Injection Service</h3>
                        <p>
                            We make plastic parts simpler.
                        </p>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="zhutu">
                    <img src="/src/assets/img/home/daigong/hanjie.jpg" alt="">

                </div>
                <div class="biaoqian-label">
                    <div class="biaoqian">
                        <img src="/src/assets/img/home/icon/icon_13.png" />
                    </div>
                    <div class="label">
                        <h3>Welding of Metals Service</h3>
                        <p>
                            Supports TIG, MIG, MAG, AMAW, AAW, CW processes, etc.
                        </p>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="zhutu">
                    <img src="/src/assets/img/home/daigong/penqi.jpg" alt="">

                </div>
                <div class="biaoqian-label">
                    <div class="biaoqian"><img src="/src/assets/img/home/icon/icon_14.png" /></div>
                    <div class="label">
                        <h3>Surface Treatment Service</h3>
                        <p>
                            Quick response, environmentally compliant.
                        </p>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="zhutu">
                    <img src="/src/assets/img/home/daigong/banjin.jpg" alt="">

                </div>
                <div class="biaoqian-label">
                    <div class="biaoqian"><img src="/src/assets/img/home/icon/icon_15.png" /></div>
                    <div class="label">
                        <h3>Sheet-metal Working Service</h3>
                        <p>
                            Shearing, corner cutting, bending, rolling, riveting, etc.
                        </p>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="zhutu">
                    <img src="/src/assets/img/home/daigong/weixiu.jpg" alt="">

                </div>
                <div class="biaoqian-label">
                    <div class="biaoqian"><img src="/src/assets/img/home/icon/icon_16.png" /></div>
                    <div class="label">
                        <h3>Electrical Assembly Service</h3>
                        <p>
                            Provide electrical assembly services that can reach international technological standards.
                        </p>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="zhutu">
                    <img src="/src/assets/img/home/daigong/qiexiaojiagong.jpg" alt="">

                </div>
                <div class="biaoqian-label">
                    <div class="biaoqian"><img src="/src/assets/img/home/icon/icon_17.png" /></div>
                    <div class="label">
                        <h3>Turning Processing Service</h3>
                        <p>
                            It is capable of achieving medium and small batch turning processing.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container product">
        <div class="title">
            □ Self Developed Product
        </div>

        <p>
            As a manufacturer of livestock equipment, Dedahaikang has always been committed to the pursuit of
            professionaltechnological innovation and perfect product guality,dedicated to keeping China's aquaculture
            equipment in stepwith the worid.and creatina better investment returns and customer experience for customers.
        </p>

        <div class="liebiao">

            <div class="item">

                <div class="photo">
                    <img class="small" src="/src/assets/img/home/product/gaoyaqingxi_260x160.jpg" alt="">
                    <img class="big" src="/src/assets/img/home/product/gaoyaqingxi_800x400.jpg" alt="">
                </div>

                <div class="word">
                    <div class="label">High Pressure Cleanning Equipment</div>
                    <!-- <div class="description">Since the first generation of high-pressure cleaners based on the German
                        Karcher industrial-grade cleaning machine was manufactured in 2014, it has undergone multiple
                        iterations.The product has good stability.a low failure rate, and a guaranteed supply of spare
                        parts.</div> -->

                    <div class="description">Since the first generation of high pressure cleaners was manufactured in 2014,
                        it has undergone multiple iterations. The product has good stability, a low failure rate, and a
                        guaranteed supply of spare parts.</div>
                </div>

            </div>

            <div class="item">

                <div class="photo">
                    <img class="small" src="/src/assets/img/home/product/zhiranqunuanji_260x160.jpg" alt="">
                    <img class="big" src="/src/assets/img/home/product/zhiranqunuanji_800x400.jpg" alt="">

                </div>

                <div class="word">
                    <div class="label">Gas Heater</div>
                    <div class="description">
                        <!-- Based on the prototype of the gas heater of L.B. white Company in the United States.improvements
                        have been made to the common problems of this model. -->
                        Based on our years of industry experience and users’ feedback, improvements have been made to the
                        common problems of this model.
                    </div>
                </div>

            </div>

            <div class="item">

                <div class="photo">
                    <img class="small" src="/src/assets/img/home/product/hengwennuanfeng_260x160.jpg" alt="">
                    <img class="big" src="/src/assets/img/home/product/hengwennuanfeng_800x400.jpg" alt="">
                </div>

                <div class="word">
                    <div class="label">Electric Heater</div>
                    <div class="description">
                        This product is desianed for special places where gas cannot be used, featuring high safety and
                        energy efficiency.
                    </div>
                </div>

            </div>

            <div class="item">

                <div class="photo">
                    <img class="small" src="/src/assets/img/home/product/zhuchangmen_260x160.jpg" alt="">
                    <img class="big" src="/src/assets/img/home/product/zhuchangmen_800x400.jpg" alt="">
                </div>

                <div class="word">
                    <div class="label">Farm Door</div>
                    <div class="description">
                        Sturdy and durable, not prone to deformation.
                    </div>
                </div>

            </div>

            <div class="item">

                <div class="photo">
                    <img class="small" src="/src/assets/img/home/product/fengji_260x160.jpg" alt="">
                    <img class="big" src="/src/assets/img/home/product/fengji_800x400.jpg" alt="">
                </div>

                <div class="word">
                    <div class="label">FRP Fan</div>
                    <div class="description">
                        <!-- Based on the FRP fan of GSl Company, it has beer improved by using higher-quality raw materials and
                        accessories,making it more durable and energy-efficient. -->
                        Based on our years of industry experience and users’ feedback, it has been improved by using
                        higher-quality raw materials and accessories, making it more durable and energy-efficient.
                    </div>
                </div>

            </div>

            <div class="item">

                <div class="photo">
                    <img class="small" src="/src/assets/img/home/product/jiaoguan_260x160.jpg" alt="">
                    <img class="big" src="/src/assets/img/home/product/jiaoguan_800x400.jpg" alt="">
                </div>

                <div class="word">
                    <div class="label">High Pressure Cleaning of Hoses</div>
                    <div class="description">
                        With 12 years of processing experience, we have achieved a low failure rate, high stability and
                        extremely high cost performance for this product.
                    </div>
                </div>

            </div>

            <div class="item">

                <div class="photo">
                    <img class="small" src="/src/assets/img/home/product/cart_260x160.jpg" alt="">
                    <img class="big" src="/src/assets/img/home/product/cart_800x400.jpg" alt="">
                </div>

                <div class="word">
                    <div class="label">Boar Cart</div>
                    <div class="description">
                        <!-- Based on the prototype of the Canadian boar cart, improvements have been made in four aspects: sheet
                        metal processing, welding, battery, and drive axle. -->
                        Based on our years of industry experience and users’ feedback, improvements have been made in four
                        aspects: sheet metal processing, welding, battery, and drive axle.
                    </div>
                </div>

            </div>

            <div class="item">

                <div class="photo">
                    <img class="small" src="/src/assets/img/home/product/daoshicao_260x160.jpg" alt="">
                    <img class="big" src="/src/assets/img/home/product/daoshicao_800x400.jpg" alt="">
                </div>

                <div class="word">
                    <div class="label">Metal Raceway By AZM Plate</div>
                    <div class="description">
                        It is made of the latest high-anti-corrosion materials from POSCO of Korea and processed by original
                        imported equipment from Japan.
                    </div>
                </div>

            </div>

            <!-- <div class="item">

                <div class="photo">
                    <img class="small" src="/src/assets/img/home/product/liaoji_260x160.jpg" alt="">
                    <img class="big" src="/src/assets/img/home/product/liaoji_800x400.jpg" alt="">
                </div>

                <div class="word">
                    <div class="label">Wet/Dry Feeders</div>
                    <div class="description">
                        Referring to the overall structural design of CRYSTAL SPRING Company in Canada, our advantages are
                        higher welding quality and more durable trough.
                    </div>
                </div>

            </div> -->

            <div class="item">

                <div class="photo">
                    <img class="small" src="/src/assets/img/home/product/ss_feeders_260x160.jpg" alt="">
                    <img class="big" src="/src/assets/img/home/product/ss_feeders_800x400.jpg" alt="">
                </div>

                <div class="word">
                    <div class="label">SS. Feeders</div>
                    <div class="description">
                        Based on our years of industry experience and users’ feedback ,our advantages are higher welding
                        quality and more durable trough.
                    </div>
                </div>

            </div>
            <div class="item">

                <div class="photo">
                    <img class="small" src="/src/assets/img/home/product/gaoyaqingxijiare_260x160.jpg" alt="">
                    <img class="big" src="/src/assets/img/home/product/gaoyaqingxijiare_800x400.jpg" alt="">
                </div>

                <div class="word">
                    <div class="label">Heater for High Pressure CleanningEquipment</div>
                    <div class="description">
                        Possessing core technologies and fully independently manufactured.
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="container product m-t20">
        <div class="title">
            □ Solutions
        </div>
        <p>
            Taking the products of top companies in the livestock machinery industry as the standard, and leveraging China's
            strong industrial manufacturing capabilities, we produce livestock machinery products in accordance with the
            highest industrial standards in China. Since the establishment of our company, we have always adhered to this
            product production concept, meticulously crafting and carefully polishing each product.
        </p>

    </div>

    <div class="npi">
        <div class="npi__items">
            <div class="npi__item"></div>
            <div class="npi__item">
                <div class="npi__description lazy come-in--right entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="npi__description-wrapper">
                        <div class="npi__description-text">
                            <h2 class="solutions-item-title">High Pressure Fogging System</h2>
                            <p>The high pressure fogging system is the first product of Dedahaikang's
                                entrepreneurship. It is based on the high pressure fogging of the German Lubing
                                Company as the industrial prototype. Considering the reality of poor water
                                quality in the Chinese market, our high pressure fogging system not only ensures
                                high atomization effect but also has rich construction and after-sales service
                                experience in anti-clogging.</p>
                        </div>
                    </div>
                </div>
                <div class="npi__image-wrapper">
                    <img class="npi__image lazy entered loaded" data-src="" alt="CM3"
                        data-extentions-extra-ocr-id="e3b0c44298fc1c149afbf4c8996fb924" data-ll-status="loaded"
                        src="/src/assets/img/home/solutions/solutions1_800x450.jpg">
                </div>
            </div>
            <div class="npi__item">
                <div class="npi__description lazy come-in--left entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="npi__description-wrapper">
                        <div class="npi__description-text">
                            <h2 class="solutions-item-title">Stationary High Pressure Cleaner</h2>
                            <p>This is the second product of Dedahaikang's entrepreneurship. The first mobile
                                cold water high-pressure cleaner was born in 2014. In 2016, we were the first
                                in China's livestock to introduce a gas-heated stationary high-pressure cleaner.
                                More than 300 pig farms have installed our stationary high-pressure cleaner.
                                Now we are striving to provide better after-sales service for our customers.</p>
                        </div>
                    </div>
                </div>
                <div class="npi__image-wrapper">
                    <img class="npi__image lazy entered loaded" data-src="/media/iitnqi14/111.jpg" alt="111"
                        data-extentions-extra-ocr-id="e3b0c44298fc1c149afbf4c8996fb924" data-ll-status="loaded"
                        src="/src/assets/img/home/solutions/solutions2_800x450.jpg">
                </div>
            </div>

            <div class="npi__item">
                <div class="npi__description lazy come-in--left entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="npi__description-wrapper">
                        <div class="npi__description-text">
                            <h2 class="solutions-item-title">Vehicle Drying System</h2>
                            <p>In the context of the severe ASF epidemic, our company has made localized
                                improvements to the original imported drying equipment from the United States
                                of GSI Company. After multiple product upgrades, it is now the third-generation
                                product, retaining the high safety of American equipment and performing well in
                                reducing vehicle damage and energy conservation.</p>
                        </div>
                    </div>
                </div>
                <div class="npi__image-wrapper">
                    <img class="npi__image lazy entered loaded" data-src=""
                        src="/src/assets/img/home/solutions/solutions3_800x450.jpg">
                </div>
            </div>

            <div class="npi__item">
                <div class="npi__description lazy come-in--left entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="npi__description-wrapper">
                        <div class="npi__description-text">
                            <h2 class="solutions-item-title">Electric Heating Drying System</h2>
                            <p>Designed for special customers who can only use electric heating, it features high
                                safety and lower energy consumption than similar products.</p>
                        </div>
                    </div>
                </div>
                <div class="npi__image-wrapper">
                    <img class="npi__image lazy entered loaded" data-src=""
                        src="/src/assets/img/home/solutions/solutions4_800x450.jpg">
                </div>
            </div>

            <div class="npi__item">
                <div class="npi__description lazy come-in--left entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="npi__description-wrapper">
                        <div class="npi__description-text">
                            <h2 class="solutions-item-title">UV Water Disinfection Equipment</h2>
                            <p>The process of sand filtration +UV is adopted to sterilize underground drinking water.</p>
                        </div>
                    </div>
                </div>
                <div class="npi__image-wrapper">
                    <img class="npi__image lazy entered loaded" data-src=""
                        src="/src/assets/img/home/solutions/solutions5_800x450.jpg">
                </div>
            </div>

            <div class="npi__item">
                <div class="npi__description lazy come-in--left entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="npi__description-wrapper">
                        <div class="npi__description-text">
                            <h2 class="solutions-item-title">The Dry Feeding System</h2>
                            <p>The Dry feeding system has been upgraded in quality based on the Dry feeding
                                system of Big Dutchman Company, with a lower failure rate and better supply of
                                accessories and after-sales service.</p>
                        </div>
                    </div>
                </div>
                <div class="npi__image-wrapper">
                    <img class="npi__image lazy entered loaded" data-src=""
                        src="/src/assets/img/home/solutions/solutions6_800x450.jpg">
                </div>
            </div>
        </div>

    </div>
    <div class="container solution-tail">
        <div class="img-txt">
            <div class="img">
                <img src="/src/assets/img/home/solutions/solutions_7_600x542.png" alt="">
            </div>
            <div class="description">
                <h3>Climate Control System</h3>
                <p>
                    We can provide new construction and renovation services for the overall climate control system of pig
                    farms.
                </p>
                <h3 class="">System Renovation And Maintenance</h3>
                <p>
                    Our company can provide renovation and maintenanceservices for pig farm Dry feeding system,Climate
                    controlsystem,and Pigsty systems.
                </p>
            </div>
        </div>
    </div>

    <div class="container product m-t20">
        <div class="title">
            □ Agency Products
        </div>
        <p>
            Since the company was established in 2012, after more than ten years of practical usage experience, we have
            selected some hidh-auality and cost-efective products and sold them through trade.
        </p>

        <div class="liebiao">
            <div class="item" >
                <div class="photo" ><img
                        class="small" src="/src/assets/img/home/agency/agency1_260x160.jpg" alt="">
                        <img class="big"
                        src="/src/assets/img/home/agency/agency1_800x400.jpg" alt=""></div>
                <div class="word" >
                    <div class="label" >
                        Distribution Box
                    </div>
                        
                    <div class="description" >
                        Based on the product prototype of the top plastic distribution box from the 
German Gustav Hensel Company in the industry, this plastic box is locally 
produced in China. It features a high protection level, excellent anti-corrosion 
performance, high safety, and the advantages of modularization, splicing, 
expandability, and flexible use.
                    </div>
                </div>
            </div>
            <div class="item" >
                <div class="photo" ><img
                        class="small" src="/src/assets/img/home/agency/agency2_260x160.jpg" alt="">
                        <img class="big"
                        src="/src/assets/img/home/agency/agency2_800x400.jpg" alt=""></div>
                <div class="word" >
                    <div class="label" >
                        Socket Type Welded Joint
                    </div>
                        
                    <div class="description" >
                        High quality and highly competitive prices.
                    </div>
                </div>
            </div>
            <div class="item" >
                <div class="photo" ><img
                        class="small" src="/src/assets/img/home/agency/agency3_260x160.jpg" alt="">
                        <img class="big"
                        src="/src/assets/img/home/agency/agency3_800x400.jpg" alt=""></div>
                <div class="word" >
                    <div class="label" >
                        Cooling Pad
                    </div>
                        
                    <div class="description" >
                        Based on the processing technology of Swedish Munters Company,the products produced in China offer high cost performance.
                    </div>
                </div>
            </div>
            <div class="item" >
                <div class="photo" ><img
                        class="small" src="/src/assets/img/home/agency/agency4_260x160.jpg" alt="">
                        <img class="big"
                        src="/src/assets/img/home/agency/agency4_800x400.jpg" alt=""></div>
                <div class="word" >
                    <div class="label" >
                        Quick Couplings
                    </div>
                        
                    <div class="description" >
                        High quality and highly competitive prices. with an extremely high cost performance.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less">
.blue {
    color: #004d7b;
}

.weight {
    font-weight: bold;
}

.m-t20 {
    margin-top: 20px;
}

.daigong {

    .title {
        background-color: #004d7b;
        color: #fff;
        line-height: 2.5;
        text-indent: 20px;
    }

    .item-list {

        margin-top: 20px;

        display: flex;
        flex-wrap: wrap;

        .item {

            width: 50%;
            padding: 20px 50px;
            box-sizing: border-box;

            .zhutu {
                img {
                    width: 100%;
                }
            }


            .biaoqian-label {

                display: flex;
                align-items: center;

                position: relative;
                width: 80%;

                background-color: #004d7b;
                margin: 0 auto;
                top: -60px;
                color: #fff;

                padding: 10px;

                .biaoqian {

                    width: 80px;
                    flex: none;

                    img {
                        width: 100%;
                    }
                }

                .label {

                    padding-left: 20px;

                    h3 {
                        margin: 0;
                        padding: 0;
                        // font-size: 18px;

                        font-size: 17px;
                        line-height: 1;
                        margin-bottom: 8px;
                    }

                    p {
                        margin: 0;
                        padding: 0;
                        font-size: 14px;
                    }
                }


            }

        }
    }
}

.npi{
    margin-top:0;
    margin-bottom:0;
}
.product {

    .title {
        background-color: #004d7b;
        color: #fff;
        line-height: 2.5;
        text-indent: 20px;
    }

    .liebiao {

        .item {

            display: flex;
            align-items: center;

            &:hover {
                .photo {
                    .small {
                        display: none;
                    }

                    .big {
                        display: inline-block;
                        box-shadow: 2px 2px 5px #cdcdcd;
                    }
                }

                .word {

                    .label {

                        &::before {
                            content: " ";
                            display: block;
                            position: absolute;
                            top: 8px;
                            left: -20px;
                            width: 0;
                            height: 0;
                            border-bottom: 8px solid transparent;
                            border-top: 8px solid transparent;
                            border-right: 16px solid rgb(166, 177, 2);
                        }
                    }
                }

            }

            .photo {

                flex: 1;


                width: 50%;
                text-align: right;

                .small {
                    display: inline-block;
                    max-width: 100%;

                }

                .big {
                    max-width: 100%;
                    display: none;
                }


            }

            .word {

                width: 50%;
                flex: 1;
                padding: 0 30px;
                box-sizing: border-box;

                .label {

                    font-weight: bold;
                    line-height: 2;
                    font-size: 16px;
                    position: relative;


                }

                .description {
                    font-size: 14px;
                    line-height: 1.5;
                }
            }
        }

    }

}

.numbers__items {

    .numbers__item {
        .numbers__text {

            .text {
                // font-weight:bold;

            }

            .weight {
                font-size: 18px;
            }
        }
    }
}

.solutions-item-title {
    font-size: 20px;
}

.solution-tail {

    .img-txt {

        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;

        .img {
            width: 50%;
            text-align: center;

            img {
                max-height: 380px;

            }

        }

        .description {
            width: 50%;

            h3 {
                font-size: 20px;
            }

            p {}
        }

    }
}

@media screen and (max-width: 975px) {

    .daigong {

        .item-list {

            .item {
                width: 100%;
                padding: 0;

                .biaoqian-label {
                    top: 0;
                    width: 100%;
                }
            }
        }
    }


}

@media only screen and (max-width: 768px) {
    .solution-tail {

        .img-txt {

            .img {
                width: 100%;
            }

            .description {
                width: 100%;
            }
        }

    }
}</style>

<style scoped>/* .swiper-container{
    width:800px;
    max-width:100%;
    height: 400px;
    margin: 0 auto;

} */
.slide-image {

    width: 100%;
    height: 100%;
    object-fit: cover;
    /*图片自适应容器，保持比例*/

}</style>